<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        h1{
            text-align: center;
        }
        table{
            margin:0 auto;
            width: 60%;
            border:2px solid #aaa;
            border-collapse:collapse;
        }
        table th,table td{
            border: 2px solid #aaaaaa;
            padding: 5px;
        }
    </style>
    <script type="text/javascript">

        function add_shoppingcar(btn){
            var tds = $(btn).parent().siblings();
            var name = tds.eq(0).text();
            var price = tds.eq(1).text();

            var new_tr = $(
                '<tr>'+
                    '<td>'+name+'</td>'+
                    '<td>'+price+'</td>'+
                    '<td align="center">'+
                    '<input type="button" value="-" onclick="change(this, -1);"/> '+
                    '<input type="text" size="3" readonly value="1"/> '+
                    '<input type="button" value="+" onclick="change(this, 1);"/> '+
                    '</td>'+
                    '<td>'+price+'</td>'+
                    '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>' +
                '</tr>'
            );
            $("#goods").append(new_tr);
            total();
        }

        function del(btn){
            $(btn).parent().parent().remove();
            total();
        }
        function total(){
            var trs = $("#goods tr");
            var sum = 0;
            for(var i = 0; i<trs.length; i++){
                var td = trs.eq(i).children().eq(3);
                var m = td.text();
                sum += parseFloat(m);
            }
            $("#total").text(sum);
        }

        function change(btn,n){
            var t = $(btn).next().length == 0? $(btn).prev() : $(btn).next();
            var amount = parseInt(t.val());
            if(amount <= 1 && n<0){
                return;
            }
            t.val(amount+n);
            amount = t.val();

            var tds = $(btn).parent().siblings();
            var price = tds.eq(1).text();
            var m = price*amount;
            tds.eq(2).text(m);
            total();
        }
    </script>
</head>
<body>
    <h1>真划算</h1>
    <table>
        <tr>
            <th>商品</th>
            <th>单价（元）</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>罗技M185鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcar(this);"/>
            </td>
        </tr>
        <tr>
            <td>微软X470键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>8932</td>
            <td>96%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcar(this);"/>
            </td>
        </tr>
        <tr>
            <td>洛克iphone6手机壳</td>
            <td>60</td>
            <td>透明</td>
            <td>233</td>
            <td>95%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcar(this);"/>
            </td>
        </tr>
        <tr>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>91%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcar(this);"/>
            </td>
        </tr>
        <tr>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_shoppingcar(this);"/>
            </td>
        </tr>
    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <td>商品</td>
                <td>单价(元)</td>
                <td>数量</td>
                <td>金额(元)</td>
                <td>删除</td>
            </tr>
        </thead>
        <tbody id="goods">

            <!--<tr>
              <td>罗技M185鼠标</td>
              <td>80</td>
              <td align="center">
                <input type="button" value="-" onclick="change(this, -1);"/>
                <input type="text" size="3" readonly value="1"/>
                <input type="button" value="+" onclick="change(this, 1);"/>
              </td>
              <td>80</td>
              <td align="center"><input type="button" value="x" onclick="del(this);"/></td>
            </tr>-->

        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>